import React from 'react';
import styles from './index.less';
import { ActivityIndicator } from 'antd-mobile';
export default class Singer extends React.Component {
  state = {
    Id: this.props.location.pathname.split('/'),
    SingerList: [],
    NewPage: 1,
    animating: true,
  };
  render() {
    return (
      <div>
        <div className={styles.Change_Box} onClick={this.Refresh}>
          <h3 className={styles.Change_Singer}>换一批</h3>
        </div>
        <div>
          {this.state.SingerList.map((item, index) => {
            return (
              <div key={index} className={styles.Music_Box}>
                {/* <div>
                  <img src={item.singer_cover} />
                </div> */}
                <div className={styles.Singer_Name}>{item.singer_name}</div>
                <img
                  className={styles.right_turn}
                  src="https://h5.1ting.com/touch/image/mobile/arrow_icon_normal.png"
                />
              </div>
            );
          })}
          <div className="toast-example">
            <ActivityIndicator toast text="Loading..." animating={this.state.animating} />
          </div>
        </div>
      </div>
    );
  }
  Refresh = () => {
    this.setState(prevState => ({
      NewPage: prevState.NewPage + 1,
    }));
    fetch(`/api/client/group_view/${this.state.Id[3]}.json?page=${this.state.NewPage}`)
      .then(response => response.json())
      .then(res => {
        this.setState(prevState => ({
          // SingerList: prevState.SingerList.push(...res.items),
          SingerList: res.items,
        }));
      });
    console.log(this.state.NewPage);
  };

  componentDidMount() {
    fetch(`/api/client/group_view/${this.state.Id[3]}.json?page=1`)
      .then(response => response.json())
      .then(res => {
        this.setState({
          SingerList: res.items,
          animating: !this.state.animating,
        });
        console.log(this.state.SingerList);
      });
  }
}
